<script setup>
import { getRouteParams,goHome,goService} from "../../tools/go";
//从页面传参定义返回页面，flag  1首页
var flag = getRouteParams('flag');
const kjlist1 = [
  {id:1,name:'家庭保洁',img:"src/static/img/house/jtbj.png"},
  {id:2,name:'家电清洗',img:"src/static/img/house/jdqx.png"},
  {id:3,name:'保姆月嫂',img:"src/static/img/house/bmys.png"},
  {id:4,name:'维修安装',img:"src/static/img/house/wxaz.png"},
]
const kjlist2 = [
  {id:1,name:'管道疏通',img:"src/static/img/house/gdst.png"},
  {id:2,name:'开锁换锁',img:"src/static/img/house/kshs.png"},
  {id:3,name:'搬家',img:"src/static/img/house/pj.png"},
  {id:4,name:'除甲醛',img:"src/static/img/house/cjc.png"},
  {id:5,name:'企业保洁',img:"src/static/img/house/qybj.png"},
]
const kjlist3 = [
  {id:1,name:'单次保洁',txet:"会员享优惠",img:"src/static/img/house/社区新闻2图片.jpg"},
  {id:2,name:'保洁套餐',txet:"固定家洁师",img:"src/img/indeximg/kjfs/社区新闻2图片.jpg"},
]
const kjlist4 = [
  {id:1,name:'擦玻璃',img:"src/static/img/house/cbl.png"},
  {id:2,name:'洗油烟机',img:"src/static/img/house/xcyyj.png"},
  {id:3,name:'保洁',img:"src/static/img/house/bj.png"},
  {id:4,name:'除螨',img:"src/static/img/house/cm.png"},
  {id:5,name:'新居开荒',img:"static/img/house/xjkh.png"},
  {id:6,name:'家居清洗',img:"src/static/img/house/jjqx.png"},
  {id:7,name:'厨卫套装',img:"src/static/img/house/cwtz.png"},
  {id:8,name:'洗鞋子',img:"src/static/img/house/xxz.png"},
]

</script>

<template>
  <view class="titli">
    <v-icon @click="flag == 1 ? goHome() : goService()" class="icon" icon="mdi-chevron-left"></v-icon>
    <h3>家政服务</h3>
  </view>
<!-- 快捷方式  -->
  <view class="kj1">
    <ul class="w">
      <li v-for="(item,index) in kjlist1" :key="index">
        <a>
          <text>{{ item.name }}</text>
          <img :src="item.img" alt="">
        </a>
      </li>
    </ul>
  </view>
<!-- 快捷方式2 -->
  <view class="kj2">
    <ul class="w">

      <li v-for="(item,index) in kjlist2" :key="index">
        <a>
          <div class="img"><img :src="item.img" alt=""></div>
          <text>{{ item.name }}</text>
        </a>
      </li>
    </ul>
  </view>
  <!-- 快捷方式3 -->
  <view class="kj3">
    <ul class="w">
      <li v-for="(item,index) in kjlist3" :key="index">
        <a>
          <view>
            <h4>{{ item.name }}</h4>
            <v-icon icon="mdi-chevron-right"></v-icon>
          </view>
          <text>{{ item.txet }}</text>
        </a>
      </li>
    </ul>
  </view>
  <!-- 快捷方式4 -->
  <view class="kj4">
    <ul class="w">
      <li v-for="(item,index) in kjlist4" :key="index">
        <a>
          <text>{{ item.name }}</text>
          <img :src="item.img" alt="">
        </a>
      </li>
    </ul>
  </view>
<!-- bg -->
  <view class="bg">
    <view>
      <h3>热门精选</h3>
      <v-icon icon="mdi-chevron-right"></v-icon>
    </view>

    <img src="../../static/img/house/qwq.png" alt="">
  </view>
</template>

<style scoped lang="scss">
//bg
.bg{
  img{
    width: 100%;
    height: 200px;
    margin-top: 10px;
  }
  view{
    h3{
      font-size: 18px;
      font-weight: 500;
    }
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  width: 95%;
  margin: 10px auto;
}
//快捷方式4
.kj4{
  ul{
    li{
      a{
        img{
          width: 60%;
        }
        text{
          font-size: 14px;
        }
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      height: 85px;
      border: 2px solid #E2E2E2;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: (2,100px);
    grid-gap: 10px;
  }
  width: 100%;
  margin-top: 10px;
}
//快捷方式3
.kj3{
  ul{
    li:nth-child(2){
      background: #ECD6AD;
    }
    li{
      a{
        text{
          font-size: 14px;
        }
        view{
          h4{
            font-size: 20px;
          }
          display: flex;
          align-items: center;
        }
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin-left: 12px;
      }
      display: flex;
      align-items: center;
      background: #9AE5E0;
      height: 70px;
    }
    display: grid;
    grid-template-columns: repeat(2,1fr);
    grid-template-rows: (1,100px);
    grid-gap: 10px;
  }
  width: 100%;
  margin-top: 10px;
}
//快捷方式2
.kj2{
  ul{
    li{
      a{
        div{
          background: #bef7b3;
          border-radius: 25px;
          width: 50px;
        }
        img{
          width: 40px;
        }
        text{
          margin-top: 5px;
          font-size: 14px;
        }
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      display: flex;
      align-items: center;
      justify-content: center;
    }
    display: grid;
    grid-template-columns: repeat(5,1fr);
    grid-template-rows: (1,100px);
    grid-gap: 10px;
  }
  width: 100%;
  margin-top: 10px;
}
//快捷方式1
.kj1{
  ul{
    li{
        a{
          img{
            width: 100%;
          }
          text{
            font-size: 14px;
          }
          display: flex;
          flex-direction: column;
          align-items: center;
        }
      background: #E5F8F2;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 5px;
    }
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: (1,100px);
    grid-gap: 10px;
  }
  width: 100%;
  margin-top: 10px;
}
//标题
.titli {
  h3 {
    font-size: 17px;
    font-weight: 400;
    color: #000000;
    text-align: center;
  }
  .icon {
    position: absolute; /* 将 icon 脱离文档流 */
    left: 10px;
    font-size: 25px;
    color: #000000;
  }
  position: relative; /* 父容器设置为相对定位 */
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  width: 100%;
  height: 8vh;
  background: #ffffff;
}
body{
  display: flow-root;
}
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}
.w{
  width: 95%;
  margin: 0 auto;
}
</style>